<template>
  <div>
    <!-- 事件绑定 -->
    <button v-on:click="counter++">Increment</button>
    <!-- 事件绑定 简写 -->
    <button @click="counter++">Increment</button>
    <!-- 事件绑定 事件监听函数 -->
    <button @click="increment">Increment</button>
    <br />
    <!-- 事件绑定 事件监听函数 参数 -->
    <button @click="incrementWithParam(7)">Increment with param</button>
    <br />
    <!-- 事件绑定 事件监听函数 事件对象 -->
    <button @click="incrementWithEvent">Increment with event</button>
    <button @click="incrementWithEvent($event)">Increment with event</button>
    <p>{{ counter }}</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    counter: 0
  }),
  methods: {
    increment() {
      this.counter++
    },
    incrementWithParam(step) {
      this.counter += step
    },
    incrementWithEvent(event) {
      console.log(event)
      this.counter++
    }
  }
}
</script>
